<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Demo List</title>
    <link href="../vender/sparrow/sparrow.css" rel="stylesheet" charset="utf-8" />
    <script type="text/javascript" src="../vender/jquery/jquery-3.3.1.min.js"></script>
    <script src="../vender/sparrow/layer/layer.js"></script>
    <script src="../vender/sparrow/ajax.js"></script>
    <script src="../vender/sparrow/util.js"></script>
    <script src="../vender/sparrow/validate.js"></script>
</head>
<body>
<div id="body-content">
    <div id="node-list-div" style="border:1px solid gray">

        <table class="table table-bordered" id="form-add-machine-node">
            <tbody>
            <tr class="input-format">
                <td class="container-table-tag">Cluster Name </td>
                <td>
                    <input name="cluster_name" type="text" class="form-control" data-require="1" data-check-fields="iplist" />
                    <div id="cluster_name_tip"></div>
                </td>
            </tr>

            <tr class="input-format">
                <td class="container-table-tag">Username </td>
                <td class="input-format">
                    <div class="input-group">
                        <input name="username" type="text" class="form-control" data-check-fields="iplist" data-require="1" data-len="3-20" data-len-msg="length range 3-20" data-format="[a-zA-Z0-9_]+" data-format-msg="only support letter and number or _"  placeholder="ssh username" />
                    </div><!-- /input-group -->
                    <div id="username_tip"></div>
                </td>
                <td class="container-table-tag">Password</td>
                <td>
                    <input name="password" type="text" class="form-control" data-check-fields="iplist" data-require="1" data-len="5-20" data-len-msg="length range 5-20"  placeholder="ssh password" />
                    <div id="password_tip"></div>
                </td>
            </tr>
            <tr class="input-format">
                <td class="container-table-tag">Install Path</td>
                <td>
                    <input name="install_path" type="text" class="form-control" data-require="1" data-len="4-255" data-len-msg="length range 4-255"  data-format-msg="only support letter,number or /" value="/opt/app/install" />
                    <div id="install_path_tip"></div>
                </td>
            </tr>
            <tr class="pointer batch-ip-list" >
                <td class="container-table-tag" >Batch IP List</td>
                <td colspan="3">
                    <div class="node-value text-value ip-list-value">
                        <textarea  name="iplist" class="ip-list" data-relation="username,password,install_path,cluster_name" data-require="1" data-server-check="/demo/check"  placeholder="example 127.0.0.1:8008"></textarea>
                        <div id="iplist_tip"></div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="form-group">
            <label>IP</label>
            <input name="service_ip"  data-relation="service_ip" data-alias="ip"  data-check-fields="port" data-server-check="/demo/check"  type="text" class="form-control" placeholder="redis_host:127.0.0.1" data-require="1" data-len="5-20" data-len-msg="length range 5-20" data-format="[0-9]+[\.][0-9]+[\.][0-9]+[\.][0-9]+" data-format-msg="error format(127.0.0.1)" />
            <div id="service_ip_tip"></div>
        </div>
        <div class="form-group">
            <label>Port</label>
            <input name="service_port"   data-relation="service_ip" data-alias="port"  data-server-check="/demo/check" type="text" class="form-control" data-require="1" data-type="range" data-min="50" data-max="10000"  data-format-msg="port range 0-10000" placeholder="redis_port:8080" />
            <div id="service_port_tip"></div>
        </div>

    </div>
</div>
</body>
<script src="../js/demo/form.js"></script>
</html>